<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="../../js/public/jquery-2.2.3.min.js"></script>
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/data.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <title>家族数据</title>
    <style>
        body {
            margin: 0;
        }
        header {
            width: 100%;
            height: 50px;
            background-color: rgb(242,242,242);
            /*padding: 10px 0;*/
        }
        header .go-back {
            margin: 14px 10px;
            float: left;
            width: 25px;
        }
        header h4 {
            width: 90%;
            line-height: 50px;
            margin: 0;
            text-align: center;
        }
        .highcharts-credits {
            display: none!important;
        }
    </style>
</head>
<body>
<header>
    <a href="javascript:;" onclick="window.history.back()"><img src="../../images/back.png" class="go-back" alt=""/></a>
    <h4>男女比例</h4>
</header>
<div id="container" style="width: 320px; height: 300px; margin: 0 auto"></div>
<input hidden="hidden" value="60" class="male"/>
<input hidden="hidden" value="40" class="female"/>
</body>
<script>
    $(function () {
    	var mNum = parseFloat($(".male").val())
    	var fNum = parseFloat($(".female").val())
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '家族男女比例'
            },
            tooltip: {
                headerFormat: '{series.name}<br>',
                pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
//                        style: {
//                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
//                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: '男女占比',
                data: [
                    ['男',   mNum],
                    ['女',   fNum]
//                    {
//                        name: 'Chrome',
//                        y: 12.8,
//                        sliced: true,
//                        selected: true
//                    },
//                    ['Safari',    8.5],
//                    ['Opera',     6.2],
//                    ['其他',   0.7]
                ]
            }]
        });
    });

</script>
</html>